<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>报单查询</title>

    <link rel="stylesheet" href="../../../bangnuo/css/operation/add_merchants_new.css">

    <script src="../../../bangnuo/vue/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="../../../bangnuo/vue/axios.min.js"></script>
    <script type="module" src="../operation/js/config/public.js"></script>
    <style>
        .main-body{
            width: 80%;
            margin: 0 auto;
        }
        .el-input-class{
            width: 221px;
            margin: 10px 10px;
        }
        .table-main-class{

        }
    </style>
</head>
<body>
<div id="app">
    <div class="main-body">
        <div class="input-header">
            商户名称：
            <el-input class="el-input-class" v-model="form.companyName" placeholder="请输入商户名称" ></el-input>
            商户编号：
            <el-input  v-model="form.number" placeholder="请输入商户编号" class="el-input-class"></el-input>
            报单状态：
            <el-select class="el-input-class" v-model="form.customsStatus" v-model="value" placeholder="请选择">
                <el-option
                        v-for="item in customsOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select><br>
            认证状态：
            <el-select class="el-input-class" v-model="form.checkStatus" placeholder="请选择">
                <el-option
                        v-for="item in checkOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" @click="onSubmit">查询</el-button>


        </div>
        <div class="table-main-class">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="number"
                        label="商户编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="company_name"
                        label="商户名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="create_time"
                        label="报单时间"
                        :formatter="dateFormat"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="customs_status"
                        :formatter="customsStatusFormat"
                        label="报单状态"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="check_status"
                        :formatter="checkStatusFormat"
                        label="认证状态">
                </el-table-column>
                <el-table-column
                        prop="operator"
                        label="操作员">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">继续报单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    @current-change="pageQuery">
            </el-pagination>
        </div>
    </div>

</div>
<script type="module">
    import bnApi from '../operation/js/config/public.js';
    var vue = new Vue({
        el: '#app',
        data: {
            checkOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                value: '0',
                label: '未审核'
            }, {
                value: '1',
                label: '审核中'
            }, {
                value: '2',
                label: '已通过'
            }, {
                value: '3',
                label: '未通过'
            }, {
                value: '4',
                label: '进件成功'
            }, {
                value: '5',
                label: '进件失败'
            }],
            customsOptions:[
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '0',
                    label: '未完成'
                }, {
                    value: '1',
                    label: '已完成'
                }
            ],
            tableData: [],
            form:{
                checkStatus: "",
                companyName: "",
                customsStatus: "",
                number: ""
            },
            page:{
                total:10,
                page:1,
                size:10
            },
            input:''
        },
        methods: {
            //继续保单
            handleClick(row) {
                console.log("row值：",row);
                let step = row.step;
                if(step == 0){
                    location.href="./add_merchants_new1.html?id="+row.id;
                }else if(step == 1){
                    location.href="./add_merchants_new2.html?id="+row.id;
                }else if(step == 2){
                    location.href="./add_merchants_new3.html?id="+row.id;
                }else if(step == 3){
                    location.href="./add_merchants_new4.html?id="+row.id;
                }else if(step == 4){
                    location.href="./add_merchants_new5.html?id="+row.id;
                }
            },
            //查询
            query(){
                bnApi.requestPost("/commercial/findAllNew/"+this.page.page+"/"+this.page.size,this.form).then(res=>{
                    if(res.success){
                        this.tableData = res.queryResult.list;
                        this.page.total = res.queryResult.total;
                    }
                });
            },
            pageQuery(val){
                console.log("回调参数",val);
                this.page.page = val;
                this.query();
            },
            //查询
            onSubmit(){
                this.page.page = 1;
                this.query();
            },
            //格式化时间
            dateFormat(row, column, cellValue, index) {
                const date = row[column.property];
                var dateee = new Date(date).toJSON();
                return new Date(+new Date(dateee) + 8 * 3600 * 1000)
                    .toISOString()
                    .replace(/T/g, " ")
                    .replace(/\.[\d]{3}Z/, "");
            },
            //状态结果转换
            checkStatusFormat(row, column, cellValue, index) {
                const status = row[column.property];
                if (status != null) {
                    if (status == "0") {
                        return "未审核";
                    } else if(status == "1") {
                        return "审核中";
                    } else if(status == "2"){
                        return "已通过";
                    } else if(status == "3"){
                        return "未通过";
                    }else if(status == "4"){
                        return "进件成功";
                    } else if(status == "5"){
                        return "进件失败";
                    }
                }
            },
            //报单状态转换
            customsStatusFormat(row, column, cellValue, index) {
                const status = row[column.property];
                if (status != null) {
                    if (status == "0") {
                        return "未完成";
                    } else if(status == "1") {
                        return "已完成";
                    }
                }
            }
        },
        mounted(){
            this.query();
        }
    })
</script>
</body>


</html>